<template>
  <div>
    <header class="headerCtn">
      <div class="title">订单差异分拣</div>
    </header>
    <div class="mainCtn">
      <div class="rightContent" v-loading="loading">
        <div class="flexJuconSpBeAliCenter">
          <div></div>
          <el-Space>
            <el-Button type="primary" v-print="'#printAll'" @click="printFn(allOrderList)"
              >打印不计重商品标签</el-Button
            >
          </el-Space>
        </div>
        <el-divider> 以下商品为不计重商品，如进行称重，会按称重数量和客户结算 </el-divider>
        <el-space :size="80">
          <div @click="tabClick('修改')" :class="{ tabItem: true, active: tabActive === '修改' }">
            商品重量变化 - 称重
          </div>
          <div @click="tabClick('新增')" :class="{ tabItem: true, active: tabActive === '新增' }">
            增加新商品 - 称重
          </div>
          <div @click="tabClick('删除')" :class="{ tabItem: true, active: tabActive === '删除' }">
            删除商品 - 取出
          </div>
        </el-space>
        <div class="orderList" v-if="filterOrderList.length > 0">
          <div class="orderItem" v-for="(item, index) in filterOrderList" :key="index">
            <div class="type">{{ item.FMaterialName }}</div>
            <el-Space size="large" wrap>
              <GoodsBox
                v-for="(i, index) in item.data"
                :key="i.FOrderBillNO + Math.random()"
                :goodsInfo="i"
                :reset="reset"
              >
                <template #content>
                  <div class="infoCard">
                    <div class="first">
                      <span>序号：{{ index + 1 }}</span
                      ><span>{{ i.FCustName }}</span>
                    </div>
                    <div class="second">{{ i.FQty }}{{ i.FPriceUnitID }}</div>
                    <div class="third">
                      <div>变更前：{{ i.FOriginalQty || 0 }}{{ i.FPriceUnitID }}</div>
                      <div>本次称重：{{ i.F_TEZV_JHSL || 0 }}{{ i.FPriceUnitID }}</div>
                    </div>
                  </div>
                </template>
              </GoodsBox>
            </el-Space>
          </div>
        </div>
        <el-empty v-else :image-size="200" />
      </div>
    </div>
    <PrintPage printId="printAll" :list="printInfo" />
    <ShowNumCard />
  </div>
</template>

<script lang="ts" setup>
import PrintPage from '@/components/printPage.vue'
import { onMounted, ref } from 'vue'
import GoodsBox from '../components/goodsBox.vue'
import ShowNumCard from '../components/showNumCard.vue'
import { GetSysReportData, queryGroupInfo } from '@/api/home'
import { groudSort } from '@/utils/commonFn'
import { dayjs } from 'element-plus'
const allOrderList = ref<GoodsTypes.differencesOrderInfo[]>([])
const filterOrderList = ref<
  {
    [x: string]: any
    data: GoodsTypes.differencesOrderInfo[]
  }[]
>([])
const printInfo = ref<any>([])
const loading = ref(false)
const reset = async (val: string) => {
  loading.value = true
  const res1: any = await GetSysReportData({
    formid: 'SAL_SOChangeSynPriceRpt',
    data: {
      FieldKeys: 'FCustName,FMaterialName,FChangeType,FOriginalQty,FQty,FOrderBillNO,FPriceUnitID',
      OrderString: '',
      TopRowCount: 0,
      StartRow: 0,
      Limit: 2000,
      SubSystemId: '',
      Model: {
        FChangeDateFrom: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'), //取当天时间
        FChangeDateTo: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'), //取当天时间
        // FChangeDateFrom: '2023-11-01 00:00:00',
        // FChangeDateTo: '2023-12-01 00:00:00',
        FOnlyPriceChanged: false
      },
      formid: 'SAL_SOChangeSynPriceRpt'
    }
  })
  const arr: GoodsTypes.differencesOrderInfo[] = []
  const rows = res1.Result.Rows
  for (let index = 0; index < rows.length; index++) {
    const res2: any = await queryGroupInfo({
      formid: 'SAL_SaleOrder',
      data: {
        FieldKeys:
          'F_TEZV_JHSL,FID,FStockUnitID.FNumber,FPriceUnitId.FNumber,FSaleOrderEntry_FEntryID,FMaterialId.Fnumber,',
        FilterString: [
          {
            Left: '(',
            FieldName: 'FBillNo',
            Compare: '=',
            Value: rows[index][5],
            Right: ')',
            Logic: 'AND'
          },
          {
            Left: '(',
            FieldName: 'FMaterialName',
            Compare: '=',
            Value: rows[index][1],
            Right: ')',
            Logic: 'AND'
          }
        ],
        OrderString: '',
        TopRowCount: 0,
        StartRow: 0,
        Limit: 2000,
        SubSystemId: '',
        formid: 'SAL_SaleOrder'
      }
    })
    let obj = {
      FCustName: rows[index][0],
      FMaterialName: rows[index][1],
      FChangeType: rows[index][2],
      FOriginalQty: rows[index][3],
      FQty: rows[index][4],
      FOrderBillNO: rows[index][5],
      F_TEZV_JHSL: res2[0] ? res2[0][0] : '',
      FPriceUnitID: rows[index][6],
      FID: res2[0] ? res2[0][1] : '',
      FStockUnitID: res2[0] ? res2[0][2] : '',
      FPriceUnitId: res2[0] ? res2[0][3] : '',
      FEntryID: res2[0] ? res2[0][4] : '',
      FMaterialIdNum: res2[0] ? res2[0][5] : '',
      FBillNo: res2[0] ? res2[0][5] : ''
    }
    arr.push(obj)
  }

  allOrderList.value = arr
  tabClick(val)
  loading.value = false
}
onMounted(() => {
  reset('修改')
})
const tabActive = ref('修改')
const tabClick = (val: string) => {
  tabActive.value = val
  if (val === '修改') {
    filterOrderList.value = groudSort(
      allOrderList.value.filter((i) => i.FChangeType == '修改' && i.FQty != i.FOriginalQty),
      'FMaterialName'
    )
  } else if (val === '新增') {
    filterOrderList.value = groudSort(
      allOrderList.value.filter((i) => i.FChangeType == '新增'),
      'FMaterialName'
    )
  } else if (val === '删除') {
    filterOrderList.value = groudSort(
      allOrderList.value.filter((i) => i.FChangeType == '删除'),
      'FMaterialName'
    )
  }
}
const printFn = (val: any) => {
  const arr = val.filter((i: any) => !(i.FChangeType == '修改' && i.FQty == i.FOriginalQty))
  printInfo.value = arr
  // const res1: any = await queryGroupInfo({
  //   formid: 'STK_Inventory',
  //   data: {
  //     FieldKeys: '',
  //     FilterString: [
  //       {
  //         Left: '(',
  //         FieldName: '',
  //         Compare: '=',
  //         Value: '',
  //         Right: ')',
  //         Logic: 'AND'
  //       }
  //     ],
  //     OrderString: '',
  //     TopRowCount: 0,
  //     StartRow: 0,
  //     Limit: 2000,
  //     SubSystemId: '',
  //     formid: 'SAL_SaleOrder'
  //   }
  // })
}
</script>

<style scoped lang="less">
.mainCtn {
  padding-right: 10px;
}
.rightContent {
  width: 100% !important;
}
.headerCtn {
  padding: 20px;
  .title {
    font-size: 24px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 33px;
    margin-right: 10px;
    .icon {
      font-size: 14px;
      color: #798294;
      margin-left: 8px;
    }
  }
}

.orderList {
  margin-top: 15px;
  .orderItem {
    .type {
      font-size: 18px;
      color: #8994b6;
      line-height: 25px;
      margin-bottom: 10px;
      margin-top: 40px;
    }
    .infoCard {
      background: #effcf8;
      padding: 10px;
      color: #61dcb4;
      .first {
        font-size: 15px;
        line-height: 20px;
        display: flex;
        justify-content: space-between;
      }
      .second {
        font-size: 32px;
        font-weight: 500;
        line-height: 41px;
        text-align: center;
        margin: 35px 0;
      }
      .third {
        font-size: 14px;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.tabItem {
  font-size: 20px;
  cursor: default;
}
.active {
  color: #86b04e;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 80px;
    height: 3px;
    background: #86b04e;
  }
}
</style>
